@extends('layouts.master')

@section('css')
@parent
	{{ HTML::style('css/jquery-ui.min.css') }}
	{{ HTML::style('fancytree/skin-lion/ui.fancytree.css') }}
	{{ HTML::script('fancytree/jquery.fancytree.js') }}
	{{ HTML::script('fancytree/jquery.fancytree.dnd.js') }}
	{{ HTML::script('fancytree/jquery.fancytree.edit.js') }}
	{{ HTML::script('fancytree/jquery.fancytree.menu.js') }}
	{{ HTML::script('js/loading-screen.js') }}
@stop

@section('styles')
@parent
<style type="text/css">
	#draggableSample, #droppableSample {
		height:100px;
		padding:0.5em;
		width:150px;
		border:1px solid #AAAAAA;
	}
	#draggableSample {
		background-color: silver;
		color:#222222;
	}
	#droppableSample {
		background-color: maroon;
		color: white;
	}
	#droppableSample.drophover {
		border: 1px solid green;
	}
	.ui-menu {
		width: 100px;
		font-size: 63%;
		z-index: 3;
	}
</style>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
	$(function(){
		$("#tree").fancytree({
			extensions: [],
			debugLevel: 2,
			source: {{ $treeData }},
			click: function(event, data) {
				if (data.node.refKey == "TEMPLATE") {
					waitingDialog.show('Loading..', {dialogSize: 'sm'});
					$.ajax({
						type: "GET",
						url: "{{ url('loadTemplate') . '/' }}" + data.node.key, //process to mail
						//data: $('form.contact').serialize(),
						success: function(msg){
							$('#templateTitle').text(msg.template.template_name);
							$('#template_id').val(msg.template.id);
							var formContent = '';
							for (i = 0; i < msg.templateParams.length; i++) {
								var template_param_id = msg.templateParams[i].id;
								var template_param_name = msg.templateParams[i].template_param_name;
								formContent = formContent + '<div class="form-group">'
											+ '<label for="recipient-name" class="control-label">' + template_param_name + '</label>'
											+ '<input type="text" class="form-control" name="template_param_value_' + template_param_id +'" id="template_param_value_' + template_param_id +'"></div>';
							}
							waitingDialog.hide();
							$('#allTemplateParam').html(formContent);
							$('#form-content').modal('show');
						},
						error: function(){
							alert("failure");
						}
					});

				}
			}
		});
		$("button#searchDoc").click(function(){
			$('form').submit();
		});
	});
</script>
@stop

@section('content')
<div class="row">
	<div class="col-md-12">&nbsp;</div>
</div>
<div class="row">
	<!-- Add a <table> element where the tree should appear: -->
	<div class="col-md-4">
		<div id="tree" class="show-gallery">
		</div>
	</div>
	
	<!-- Definition of context menu
	<ul id="myMenu" class="contextMenu ui-helper-hidden">
		<li class="edit"><a href="#edit">Edit</a></li>
		<li class="cut"><a href="#cut">Cut</a></li>
		<li class="copy"><a href="#copy">Copy</a></li>
		<li class="paste"><a href="#paste">Paste</a></li>
		<li class="ui-state-disabled"><a href="#delete">Delete</a></li>
		<li>---</li>
		<li class="quit"><a href="#quit">Quit</a></li>
		<li><a href="#save"><span class="ui-icon ui-icon-disk"></span>Save</a></li>
	</ul> -->
	<div class="col-md-8">
		<div class="show-template">
			@if (count($documents) > 0)
				@foreach($documents as $document)
				<div class="row">
					<div class="col-md-12">
						Key word :
						<a href="{{ url('generatePDF/' . $document->id) }}">
							{{ implode(', ', $document->documentIndex->lists('index_value')) }}
						</a>
					</div>
				</div>
				@endforeach
				<div class="row">
					<div class="col-md-12">
						{{ $documents->links() }}
					</div>
				</div>
			@else
			<div class="row">
				<div class="col-md-12">
					NO DATA FOUND
				</div>
			</div>
			@endif
		</div>
	</div>
</div>

<div class="modal" id="form-content" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="templateTitle"></h4>
			</div>
			<div class="modal-body">
				{{ Form::open(array('url' => 'searchDocument/', 'method' => 'post')) }}	
					<input type="hidden" id="template_id" name="template_id" />
					<div id="allTemplateParam">
					</div>
				{{ Form::close() }}
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary" id="searchDoc">Search</button>
			</div>
		</div>
	</div>
</div>
@stop